<template>
  <div class="padding-box-100">
    <button @click="add">增加</button>
    <transition-group tag="div" name="FLIP" class="FLIP-test">
      <div :key="item.key" v-for="item in box" :style="item.style"></div>
    </transition-group>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive} from 'vue'
import {getColor16} from "../utils"
import {random} from "lodash";

let count = 0

export default defineComponent({
  setup() {
    const box = reactive([])

    function add() {
      box.unshift({
        style: {
          'background-color': getColor16(),
        },
        key: count++,
      })
    }

    return {
      box,
      add,
    }
  }
})
</script>

<style>
.FLIP-test {
  display: flex;
  flex-wrap: wrap;
}

.FLIP-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}

.FLIP-test div {
  width: 23%;
  height: 200px;
  margin: 0 20px 20px 0;
  border-radius: 6px;
  transition: all 1s;
}
</style>
